<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>定时器的应用</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../style/css/base.css">
    <style>
        .p1{
            color: red;
        }
    </style>
</head>
<body>
    <div>输入统计时间：<input type="number" id="count">秒</div>
    <p class="p1">倒计时<b>10</b>秒</p>
    <br>
    <button>按钮</button>
</body>
<script>
    var s = $('.p1 b').text();     // 倒计时长
    var canClick = true;    // 是否可以点击
    var clicked = 0;    // 是否点击过
    $('button').click(function(){
        
        setTimeout(()=>{
            clearInterval();
        },10000);
        if (!canClick) return;
		canClick = !canClick;
        
        if(canClick){
            setInterval(function(){
                if(s>0){
                    s--;
                    console.log('s='+s);
                    $('.p1 b').text(s);
                    if(s==0){
                        canClick = true;
                    }
                }
            },1000);
        }
        
        // if(!canClick){
        //     if(clicked == 1){
        //         setInterval(function(){
        //             s--;
        //             console.log('s='+s);
        //             $('.p1 b').text(s);
        //             if(s > 0){
        //                 canClick = false;
        //             }else{
        //                 canClick = true;
        //             }
        //         },1000);
        //     }else{
                
        //     }
        // } else{
        //     clearInterval();
        // }
    })
</script>